<template>
	<view class="details">
		<view class="topbac f36 cf">
			{{orderStateExp(taskDetailData.status).stateTip}}
		</view>
		<view class="topaddress flex_ac">
			<u-icon name="map" color="#FD5241" size="28"></u-icon>
			<view class="flex1 overflow_1">
				<text class="ml16 f28 c3d">
					{{taskDetailData.address}}
				</text>
			</view>

		</view>
		<view class="topaddress mt28">
			<view class="f28">
				预约内容
			</view>
			<view class="flex mt24 c3d f28 " v-if="taskDetailData.type == 1">
				<image class="goodsimg" :src="$wanlshop.oss(taskDetailData.image)" mode=""></image>
				<view class="ml24  minwidth">
					<view class="f32 c3d fb">
						全屋装修
					</view>
					<view class="qwfx">
						{{taskDetailData.work_type == 1 ? '全屋新装': '全屋翻新'}}
					</view>

				</view>
			</view>
		</view>
		<view class="topaddress mt28">
			<view class="f28">
				服务描述
			</view>
			<view class="fwms mt24 c3d f24 ">
				{{taskDetailData.service_des}}
			</view>
		</view>
		<view class="topaddress mt28 f24">
			<view class="f28">
				预约详情
			</view>
			<view class="flex_ac mt20">
				<view class="info">
					订单编号：
				</view>
				<view class="ml24 flex_ac">
					<text>4943342292416230</text>
					<text class="ml12" @click="$wanlshop.copy(taskDetailData.createtime)">| 复制</text>
				</view>
			</view>
			<view class="flex_ac mt20" v-if="taskDetailData.createtime_text">
				<view class="info">
					创建时间：
				</view>
				<view class="ml24 flex_ac">
					<text>{{taskDetailData.createtime_text}}</text>
				</view>
			</view>
			<view class="flex_ac mt20" v-if="taskDetailData.cancel_time_text">
				<view class="info">
					取消时间：
				</view>
				<view class="ml24 flex_ac">
					<text>{{taskDetailData.cancel_time_text}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				taskDetailData: {},
				option: {}
			}
		},
		onLoad(option) {
			this.option = option
			this.getTaskDetail()
		},
		methods: {
			getTaskDetail() {
				this.$api.post({
					url: '/user/taskDetail',
					data: {
						id: this.option.id
					},
					success: res => {
						this.taskDetailData = res
					}
				})
			},
			//订单状态文字和颜色
			orderStateExp(state) {
				let stateTip = '',
					stateTipColor = '#333';
				switch (+state) {
					// :-1=全部,0=待签约,1=进行中,2=待验收,3=已完成,4=已取消
					case 0:
						stateTip = '已预约，待平台联系';
						stateTipColor = '#f40';
						break;
					case 1:
						stateTip = '平台已联系';
						stateTipColor = '#1A1A1A';
						break;
					case 2:
						stateTip = '已取消';
						stateTipColor = '#777';
						break;
						//更多自定义
				}
				return {
					stateTip,
					stateTipColor
				};
			},
		},
	}
</script>

<style lang="scss" scoped>
	.fwms {
		background: #F4F4F4;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 24rpx;
	}

	.goodsimg {
		width: 274rpx;
		height: 160rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.qwfx {
		margin-top: 14rpx;
		background: rgba(255, 150, 163, 0.08);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
		text-align: center;
		color: #FF2F25;
		line-height: normal;
		padding: 12rpx 4rpx;
	}

	.topbac {
		background: linear-gradient(311deg, #FF908B 0%, #FF8E89 1%, #FF5149 100%);
		padding: 52rpx 40rpx;
	}

	.topaddress {
		background: #fff;
		padding: 32rpx 42rpx;
	}
</style>